<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebarDate" role="navigation">
    <div class="list-group">
        <a href="#" class="list-group-item active">Present</a> <a href="#" class="list-group-item">Salary day</a> <a href="#"
            class="list-group-item">In a month</a> <a href="#" class="list-group-item">Next 2 months</a>
    </div>
</div>
<!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebarType" role="navigation">
    <div class="list-group">
        <a href="#" class="list-group-item active">Income</a> <a href="#" class="list-group-item">Outcome</a> <a href="#"
            class="list-group-item">Both</a>
    </div>
</div>
<!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebarKind" role="navigation">
    <div class="list-group">
        <a href="#" class="list-group-item active">Required</a> <a href="#" class="list-group-item">Optional</a> <a href="#"
            class="list-group-item">Hypothetical</a>
    </div>
</div>
<!--/span-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebarSolution" role="navigation">
    <div class="list-group">
        <a href="#" class="list-group-item active">Planned</a> <a href="#" class="list-group-item">Optimal</a> <a href="#"
            class="list-group-item">Strict</a>
    </div>
</div>
<!--/span-->